<template>
  <!-- 资讯列表页面 -->
  <div>
    <!-- {{ articleData }} -->
    <!-- {{Articlecategory}} -->
    <!-- {{Ariclecolume}} -->
    <div class="header">
      <el-select v-model="Ariclestatus" placeholder="请选择状态" clearable>
        <el-option label="未审核" value="未审核"></el-option>
        <el-option label="审核通过" value="审核通过"></el-option>
        <el-option label="审核不通过" value="审核不通过"></el-option>
        <el-option label="推荐" value="推荐"></el-option>
      </el-select>
      <!-- 产品名称输入框 -->
      <el-input
        style="width: 240px"
        placeholder="标题"
        v-model="articletitle"
        clearable
      >
      </el-input>

      <el-select v-model="Ariclecolume" placeholder="请选择栏目" clearable>
        <el-option
          v-for="item in Articlecategory.filter((item) => !item.parentId)"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>

      <el-button type="primary" @click="onSubmit">查询</el-button>

      <!-- <el-button type="primary" @click="submitcolor">发布风采</el-button> -->
    </div>
    <div class="content">
      <el-table :data="articleData" stripe style="width: 100%">
        <el-table-column
          size="medium"
          type="index"
          label="序号"
          fixed="left"
          width="60"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="封面"
          width="180"
          align="center"
          size="medium"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <el-popover placement="right" trigger="hover" width="250">
              <el-image
                slot="reference"
                :src="scope.row.cover"
                :alt="scope.row.cover"
              ></el-image>
              <el-image :src="scope.row.cover"></el-image>
            </el-popover>
          </template>
        </el-table-column>

         <el-table-column
          prop="title"
          label="名称"
          align="center"
          size="medium"
        >
        </el-table-column>


        <el-table-column
          prop="publishTime"
          label="发表时间"
          align="center"
          size="medium"
        >
         <template slot-scope="scope">
            <span>{{
              moment(scope.row.publishTime).format("YYYY-MM-DD HH:mm:SS")
            }}</span>
          </template>
        </el-table-column>


        <el-table-column
          prop="category.name"
          label="所属栏目"
          align="center"
          size="medium"
        >
      
        </el-table-column>

        <el-table-column align="center" prop="status" label="状态" width="150">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.status === '审核通过' ? 'primary' : 'warning'"
              disable-transitions
              >{{ scope.row.status }}</el-tag
            >
          </template>
        </el-table-column>

        <el-table-column label="操作" fixed="right" width="150" align="center">
          <template slot-scope="scope">
            <el-button @click="advice(scope.row)" type="text" size="small"
              >推荐</el-button
            >
            <el-button
              @click="pass(scope.row)"
              type="text"
              style="color: blue"
              size="small"
              >审核</el-button
            >
            <el-button
              type="text"
              @click="deleteArt(scope.row.id)"
              style="color: red"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 点击审核跳出对话框 -->
      <el-dialog
        title="审核"
        :visible.sync="articleDialogVisible"
        width="30%"
        center
        :v-model="articleData"
      >
        <!-- <p>{{articleData.title}}</p> -->

        <template>
          <el-button @click="articlenopass" type="danger" plain>
            审核不通过
          </el-button>

          <el-button type="primary" plain @click="articleispass"
            >审核通过</el-button
          >
        </template>
      </el-dialog>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[2, 4, 6, 8]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { get, post } from "@/utils/request";
// 引入vuex的辅助函数
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      moment,
      id: "",
      articleData: {
        title: "",
        comment: "",
      },
      // 审核对话框
      articleDialogVisible: false,
      //推荐
      advicerow: "推荐",

      shenherow: "审核通过",

      shenhenorow: "审核不通过",

      articletitle: "",

      Ariclecolume: "",

      Ariclestatus: "",
      total: 10,
      currentPage: 1,
      cover: "",
      //每一页
      page: 1,
      //每一页的条数
      pageSize: 100,

      queryArticle: {},

      articleData: [],
      formInline: {
        user: "",
        region: "",
      },
    };
  },
  computed: {
    // 使用辅助函数
    ...mapState("articlecategory", ["Articlecategory"]),
  },
  methods: {
    // 通过命名空间找到articlecategory对应的vuex模块 调用它模块里的方法
    // ...mapActions(' 文件名',['对应的方法'])
    ...mapActions("articlecategory", ["getAllarticleData"]),

    async articlenopass() {
      let nopassdata = {
        id: this.id,
        status: this.shenhenorow,
      };
      let resno = await post("/article/changeStatus", nopassdata);

      console.log(resno);

      this.getAllList();

      // 给用户一个成功或失败的提示
      if (resno.status == 200) {
        this.$message({
          message: resno.message,
          type: "success",
        });
      } else {
        this.$message.error(resno.message);
      }

      this.articleDialogVisible = false;
    },

    async articleispass() {
      let shenhe = {
        id: this.id,
        status: this.shenherow,
      };
      let reshe = await post("/article/changeStatus", shenhe);

      console.log(reshe);

      this.getAllList();

      // 给用户一个成功或失败的提示
      if (reshe.status == 200) {
        this.$message({
          message: reshe.message,
          type: "success",
        });
      } else {
        this.$message.error(reshe.message);
      }

      this.articleDialogVisible = false;
    },

    pass(row) {
      this.id = row.id;
      this.articleDialogVisible = true;
    },

    async advice(row) {
      let advice_data = {
        status: this.advicerow,

        id: row.id,
      };
      let resadvice = await post("/article/changeStatus", advice_data);

      //  this.getAllList();

      console.log(resadvice.message, "111");

      console.log(row.id);
      this.$confirm("您确定要推荐此资讯吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (resadvice.status == 200) {
            this.$message({
              type: "success",
              message: resadvice.message,
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
      this.getAllList();
    },

    async deleteArt(id) {
      let deleteres = await get("/article/deleteById", { id });

      this.getAllList();
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    columeArticlequery() {
      let data = {

      };
      
      this.getAllarticleData(data);
    },

    async onSubmit() {
      let staus1 = {
        status: this.Ariclestatus,

        title: this.articletitle,

        categoryId: this.Ariclecolume,
      };

      //    // 格式化参数 当某个属性没有值的时候 将其删除掉 以防影响网络请求的操作
      for (const key in staus1) {
        if (!staus1[key]) {
          delete staus1[key];
        }
      }

      this.queryArticle = staus1;

      this.getAllList(),
        // 将页数强制回到第一页
      this.currentPage = 1;
    },

    handleSizeChange(val) {
      this.currentPage = 1;
      // 将每页要展示的数据的条数 进行一个更新
      this.pageSize = val;
      this.getAllList();
    },

    handleCurrentChange(val) {
      this.currentPage = val;
      this.getAllList();
    },

    submitcolor() {},
    handleClick(row) {
      console.log(row);
    },
    delete() {},

    async getAllList() {
      let articledata = {
        page: this.page,
        pageSize: this.pageSize,
      };
      let res = await get("/article/pageQuery", {
        ...articledata,
        ...this.queryArticle,
      });

      console.log(res.data.list);

      console.log(res.data.list[0].id);

      this.articleData = res.data.list;

      // 页面总数据条数 赋值
      this.total = res.data.total;
    },
  },
  created() {
    this.getAllList();

    this.columeArticlequery();

    // console.log(articleData);
  },
  mounted() {},
};
</script>
<style scoped>
</style>